<template>
<view :style="[{'font-weight':Style,'font-family':Font}]">
    <cu-custom bgColor="bg-gradual-blue" isBack="true">
        <view slot="backText">返回</view>
        <view slot="content">历史台账</view>
    </cu-custom>
    <sear-ch :placeholder="placeholder" @clean="clean" @input="input" @remove="remove" style="box-shadow: none;"></sear-ch>
    <!-- 导航栏 agents导航栏标题 -->
    <navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
    <swiper :style="{height: 'calc(100vh - ' + (CustomBar + 190) + 'rpx)','margin-top':190 + 'rpx'}" :current="currentTab" @change="swiperTab">
        <swiper-item v-for="(listItem,listIndex) in 3" :key="listIndex">
            <!-- 数据列表组件 -->
            <scroll-view style="height: 100%;" scroll-y scroll-with-animation >
                <first-list :deliverplan="deliverplan" #default="{item}">
                    <view class="laoda_two">
                        <text>{{item.name}}</text>
                        <text>年龄:{{item.age}}</text>
                        <text>姓名:{{item.name1}}</text>
                        <text>年龄:{{item.age1}}</text>
                    </view>
                </first-list>
                <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
            </scroll-view>
        </swiper-item>
    </swiper>
</view>
</template>

<script>
import util  from '@/static/js/util.js'
import SearCh from '@/colorui/components/search.nvue'
import navTab from '@/colorui/components/navTab.vue'
import FirstList from '@/colorui/components/FirstList.nvue'
import {
    mapGetters
} from 'vuex'
import {
    inputSearch,
    scrollrefresh
} from "@/mixin/mixin.js"
export default {
    mixins: [inputSearch, scrollrefresh],
    data() {
        return {
            placeholder: '名称',
            loadMoreText:'加载中...',
            showLoadMore:true,
            tabTitle: ['台账一', '台账二', '台账三'], //导航栏格式
            currentTab: 0, //sweiper所在页
            message: '筛选',
            isShow: false,
            flag: true,
            CustomBar: this.CustomBar,
            deliverplan: [{
                    name: '测试样品01',
                    age: 18,
                    name1: '张',
                    age1: 18,
                    isShow: true
                },
                {
                    name: '测试样品02',
                    age: 18,
                    name1: '张三',
                    age1: 18,
                    isShow: true
                },
                {
                    name: '测试样品03',
                    age: 18,
                    name1: '张三',
                    age1: 18,
                    isShow: true
                },
                {
                    name: '测试样品04',
                    age: 18,
                    name1: '张三',
                    age1: 18,
                    isShow: true
                }
            ]
        }
    },
    computed: {
        ...mapGetters([
            'Style','Font',
        ])
    },
    components: {
        SearCh,
        navTab,
        FirstList
    },
    methods: {
        changeTab(index) {
            this.currentTab = index
        },
        // swiper 滑动
        swiperTab(e) {
            var index = e.detail.current //获取索引
            if (this.tabTitle.length <= 5) {
                this.$refs.navTab.navClick(index)
            } else {
                this.$refs.navTab.longClick(index)
            }
        },
        //监听用户下拉事件
        onPullDownRefresh() {
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 1000);
        },
        // //监听上拉加载事件
        // lower: util.throttle(function(e) {
        //     this.deliverplan = this.deliverplan.concat(this.deliverplan)
        // }, 300),
    }
}
</script>


<style>
page {
    background-color: whitesmoke;
}

.container999 {
    width: 100vw;
    font-size: 28rpx;
    min-height: 100vh;
    overflow: hidden;
    color: #6B8082;
    position: relative;
    background-color: #f6f6f6;
}

.content {
    width: 100%;
}

.card {
    width: 90%;
    height: 368rpx;
    background-color: white;
    margin: 0 auto 42rpx auto;
    background: #FFFFFF;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10);
    border-radius: 5px;
    position: relative;
}

.noCard {
    width: 90%;
    height: 200rpx;
    margin: auto;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
    border-radius: 10rpx;
}

.nav {
    position: fixed;
    left: 0;
    top: 0;
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 24rpx;
    background-color: #50B7EA;
    z-index: 996;
}

.searchInput999 {
    width: 90%;
    margin: 0 auto;
    background: white;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56rpx;
}

.search999 {
    width: 32rpx;
    height: 32rpx;
}

.searchBox999 {
    width: 56rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input999 {
    color: #999;
    width: 80%;
}
.uni-loadmore{
	height:80rpx;
	line-height:80rpx;
	text-align:center;
	padding-bottom:30rpx;
}
</style>